<template>
  <el-container style="height: 100%;width: 100%;">
    <Header/>
    <el-main>
      <div class="banner">
        <img src="" alt />
      </div>
<!--      <TopBannerView></TopBannerView>-->

      <div class="flex_column contact_title_wrapper">
        <span class="title_text">联系我们</span>
        <span class="block"/>
        <span class="tip_text">contact us</span>
      </div>

      <div class="contact_info_wrap">
        <InputInfo/>
        <div class="map_wrapper">
          <img class="map_img" src="" alt="">
        </div>

      </div>
      <Footer/>
    </el-main>
  </el-container>
</template>

<script>
import Header from "../../components/header/Header";
import TopBannerView from "../../components/TopBannerView";
import InputInfo from "../../components/contact/InputInfo";
import MapView from "../../components/contact/MapView";
import Footer from "../../components/footer/Footer";
export default {
  name: "home",
  components: {
    Header,
    TopBannerView,
    InputInfo,
    MapView,
    Footer
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
  .banner {
    position: relative;
  }

  .banner img {
    content: url("../../assets/image/joinUs/juin_us_banner.png");
    width: 100%;
    height: 100%;
  }

  .contact_title_wrapper{
    padding: 80px 40px 0px 40px;
    align-items: center;
    background-color: white;
    .title_text{
      font-size: $fz32;
      color: $title_333;
    }

    .tip_text{
      font-size: $fz16;
      color: $tip_text;
    }
    .block{
      width: 40px;
      height: 4px;
      background-color: $primary;
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }

  .contact_info_wrap{
    flex-direction: row;
    display: flex;
    background-color: white;
    padding: 103px 200px;

    .map_wrapper{
      padding: 0 80px;
      flex:1;
      /*background: #42b983;*/
      height: 240px;

      .map_img {
        width: 100%;
        height: 100%;
        content: url("../../assets/image/abouts/location.jpg");
      }

    }
  }

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {
  .banner img {
    content: url("../../assets/image/joinUs/juin_us_banner_m.png");
    width: 100%;
    min-height: 100%;
  }

  .contact_title_wrapper{
    padding: 30px 40px 0px 40px;
    align-items: center;
    background-color: white;

    .title_text{
      font-size:15px;
      color: #58627C;
    }

    .block{
      width: 20px;
      height: 2px;
      background-color: $primary;
      margin-top: 4px;
      margin-bottom: 4px;
    }

    .tip_text{
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #616161;
    }
  }

  .contact_info_wrap{
    flex-direction: column;
    background-color: white;
    padding: 22px 12px;

    .map_wrapper{
      flex:1;
      /*background: #42b983;*/
      margin-top: 38px;
      padding: 0;

      .map_img {
        content: url("../../assets/image/abouts/location_m.jpg");
      }
    }
  }
}

</style>
